<script setup lang="ts">
defineOptions({
  name: "baseInfoTable"
});
import { useRoute } from "vue-router";
import { computed } from "vue";
import ReTableTag from "@/components/ReTableTag";

const route = useRoute();

//status    1 执行中    2 执行完成
const option = new Map([
  [
    1,
    {
      value: 1,
      label: "执行中",
      color: "#3B82F6FF"
    }
  ],
  [
    2,
    {
      value: 2,
      label: "已完成",
      color: "#10B981FF"
    }
  ]
]);

interface Props {
  data: Record<string, any>;
}

const props = withDefaults(defineProps<Props>(), {
  data: () => null
});

const mapData = (data: Record<string, any> | null): Array<{ key: string; label: string; value: string | number; text?: string; span?: number }> => {
  if (!data) return [];
  const {
    workOrderNo = "",
    location = "",
    position = "",
    deviceCode = "",
    executorNameList = "",
    startTime = "",
    endTime = "",
    creatorName = "",
    createTime = "",
    taskStatus = "",
    taskStatusDesc = "",
    completedTime = "",
    takeTime = "",
    createRemark = ""
  } = data;
  const d_1 = {
    key: "workOrderNo",
    label: "工单号",
    value: workOrderNo || "--"
  };
  const d_2 = {
    key: "deviceCode",
    label: "设备编号",
    value: deviceCode || "--"
  };
  const d_3 = {
    key: "location",
    label: "设备地点",
    value: location || "--"
  };

  const d_4 = {
    key: "position",
    label: "点位",
    value: position || "--"
  };

  const d_5 = {
    key: "executorNameList",
    label: "责任人",
    value: executorNameList.join("，") || "--"
  };
  const d_6 = {
    key: "startTime",
    label: "开始时间",
    value: startTime || "--"
  };
  const d_7 = {
    key: "endTime",
    label: "结束时间",
    value: endTime || "--"
  };
  const d_8 = {
    key: "creatorName",
    label: "创建人",
    value: creatorName || "--"
  };
  const d_9 = {
    key: "createTime",
    label: "创建时间",
    value: createTime || "--"
  };
  const d_10 = {
    key: "taskStatus",
    label: "执行状态",
    value: taskStatus,
    text: taskStatusDesc
  };
  const d_11 = {
    key: "completedTime",
    label: "执行时间",
    value: completedTime || "--"
  };
  const d_12 = {
    key: "takeTime",
    label: "用时",
    value: takeTime || "--",
    span: 1
  };

  const d_12_2 = {
    key: "takeTime",
    label: "用时",
    value: takeTime || "--"
  };

  const d_13 = {
    key: "createRemark",
    label: "备注",
    value: createRemark || "--",
    span: 2
  };
  // status    1 执行中    2 执行完成
  const {
    query: { status = "" }
  } = route;
  switch (status) {
    case "1":
      return [d_1, d_2, d_3, d_4, d_5, d_6, d_7, d_8, d_9, d_12, d_13];
    case "2":
      return [d_1, d_2, d_3, d_4, d_5, d_6, d_7, d_8, d_9, d_10, d_11, d_12_2, d_13];
  }
};

const list = computed(() => mapData(props.data));
</script>

<template>
  <px-descriptions class="base-info-table" :column="3" border>
    <px-descriptions-item
      v-for="item in list"
      :key="item.key"
      :label="item.label"
      :span="item?.span || 1"
      class-name="baseInfo-descriptions-item"
      label-class-name="baseInfo-descriptions-item-label"
    >
      <ReTableTag
        v-if="item.key === 'taskStatus'"
        :tagStyle="{ justifyContent: 'flex-start' }"
        :defaultValue="1"
        type="point"
        :value="item.value"
        :label="item.text"
        :option="option"
      />
      <span v-else>{{ item.value }}</span>
    </px-descriptions-item>
  </px-descriptions>
</template>

<style lang="scss" scoped>
:deep(.px-descriptions__label.px-descriptions__cell.is-bordered-label) {
  background-color: var(--px-color-primary-light-9);
}

:deep(.baseInfo-descriptions-item) {
  min-width: 300px;
}

:deep(.baseInfo-descriptions-item-label) {
  min-width: 100px;
}
</style>
